<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>

            <el-form label-position="left" label-width="80px" :model="showInfoData" :rules="userFormRules" ref="userForm">
                <!-- 用户id，修改时使用，隐藏 -->
                <el-input v-model="showInfoData.userid" type="hidden"></el-input>
                <el-form-item label="登录名" prop="loginname">
                    <el-input v-model="showInfoData.loginname"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="username">
                    <el-input v-model="showInfoData.username"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="showInfoData.email"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" prop="phone">
                    <el-input v-model="showInfoData.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户性别" prop="sex">
                    <el-radio-group v-model="showInfoData.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="用户头像">
                    <el-upload
                            class="avatar-uploader"
                            action="http://192.168.0.100:80/clms-system/user/upload"
                            :headers= "headers"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-button type="primary" @click="updateInfo('userForm')">确 定</el-button>
            </el-form>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                headers: {
                    'Token' : sessionStorage.getItem("token")
                },
                imageUrl: '',
                showInfoData: {
                    userid: '',
                    loginname: '',
                    username: '',
                    email: '',
                    phone: '',
                    sex: '',
                    url: '',
                },
                userFormRules: {
                    loginname: [
                        { required: true, message: '请输入登录名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '手机号格式不正确，11位', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            getUserInfo() {
                this.$axios({
                    method: 'get',
                    url: 'clms-system/user/getUserInfo',
                }).then( result => {
                    this.showInfoData = result.data.object;
                    this.imageUrl = result.data.object.url;
                })
            },
            updateInfo(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 执行修改
                        this.$axios({
                            method: 'post',
                            url: 'clms-system/user/updateUser',
                            data: this.showInfoData
                        }).then( result => {
                            if (result.data.code == 200) {
                                this.$message.success(result.data.message);
                            } else {
                                this.$message.error(result.data.message)
                            }
                        })
                    } else {
                        this.$message.error("数据校验有误！");
                    }
                });
            },
            // 上传图片成功后的钩子函数
            handleAvatarSuccess(response, file) {
                this.showInfoData.url = response.img;
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        created() {
            this.getUserInfo()
        }
    }
</script>
